<template>
  <div v-if="system" class="target-architecture-page-wrapper">
    <div :style="{ display: 'flex', height: '100%' }">
      <el-card shadow="never" :style="{ flexBasis: '300px' }" :body-style="{ padding: '5px' }">
        <div :style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '5px' }">
          <div :style="{ marginLeft: '7px' }">目标架构</div>
          <el-button size="small" text bg @click="showAddDrawer = true">+</el-button>
        </div>
        <el-tree :data="documents">
          <template #default="{ data }">
            <div :style="{ display: 'flex', alignItems: 'center' }">
              <el-icon>
                <Tools v-if="data.type == 'TECHNICAL_ARCHITECTURE'" />
                <Setting v-if="data.type == 'LOGIC_ARCHITECTURE'" />
                <List v-else-if="data.type == 'SOFTWARE_LIST'" />
                <Location v-else-if="data.type == 'DEPLOY_ARCHITECTURE'" />
                <Checked v-else-if="data.type == 'DEPLOY_LIST'" />
              </el-icon>
              <div :style="{ marginLeft: '5px' }">{{ data.label }}</div>
            </div>
          </template>
        </el-tree>
      </el-card>
      <el-card shadow="never" :style="{ marginLeft: '10px', width: '100%' }">Never</el-card>
    </div>

    <el-drawer v-model="showAddDrawer" title="添加技术架构" direction="rtl" :size="860">
      <template #default>
        <div :style="{ display: 'flex', flexFlow: 'row wrap' }">
          <el-card
            shadow="hover"
            :style="{ cursor: 'pointer', width: '260px', height: '200px', marginRight: '10px', marginBottom: '10px' }"
            :body-style="{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              height: '100%',
              padding: 0,
            }"
          >
            <el-icon><Plus /></el-icon>
          </el-card>
          <el-card
            v-for="template in templates"
            :key="template.id"
            shadow="hover"
            :style="{ cursor: 'pointer', width: '260px', height: '200px', marginRight: '10px', marginBottom: '10px' }"
            @click="onClickTemplate(template.id!)"
          >
            <template #header>
              <div :style="{ display: 'flex', justifyContent: 'space-between' }">
                <div>
                  <el-text size="large" tag="b" truncated>{{ template.name }}</el-text>
                </div>
                <div><el-button size="small">预览</el-button></div>
              </div>
            </template>
            {{ template.description }}
          </el-card>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { useSystemService } from '@/service/system-service';
import { System } from '@/store/system-repository';
import { Setting, List, Location, Checked, Tools, Plus } from '@element-plus/icons-vue';

const route = useRoute();
const systemService = useSystemService();
const showAddDrawer = ref(false);

const templates = ref([
  { id: '1', name: '单服务', description: '无微服务组件' },
  { id: '2', name: '主从数据库', description: '数据库采用主从部署' },
]);
const onClickTemplate = (id: string) => {
  console.log('id =', id);
};

interface Tree {
  id: string;
  type: string;
  label: string;
  children?: Tree[];
}

const documents: Tree[] = [
  {
    id: '1',
    type: 'TECHNICAL_ARCHITECTURE',
    label: '一期目标技术架构-Beta',
    children: [
      {
        id: '1.1',
        type: 'LOGIC_ARCHITECTURE',
        label: '逻辑架构图',
      },
      {
        id: '1.2',
        type: 'SOFTWARE_LIST',
        label: '软件清单表',
      },
      {
        id: '1.3',
        type: 'DEPLOY_ARCHITECTURE',
        label: '部署架构图',
      },
      {
        id: '1.4',
        type: 'DEPLOY_LIST',
        label: '部署清单表',
      },
    ],
  },
];

const system = ref<System>();
watch(
  () => {
    return route.params.systemId as string | undefined;
  },
  newSystemId => {
    if (newSystemId) {
      systemService.system(newSystemId).then(data => {
        system.value = data;
      });
    }
  },
  { immediate: true },
);
</script>

<style lang="less" scoped>
.target-architecture-page-wrapper {
  height: 100%;
  :deep(.el-overlay) {
    .el-drawer {
      .el-card {
        .el-card__header {
          padding: 10px;
        }
      }
    }
  }
}
</style>
